<template>
	<view class="haed-search">
		<input type="text" name="" id="" class="search" placeholder="请输书名或作者名" v-model="inputValue" @confirm="search">
		<image src="../../static/img/shousuo.png" mode="" @tap="search"></image>
	</view>
	<view class="mulu" >
		<view v-for="(value,index) in msg"  :class="{'choose':index===currentSwiperIndex}" @tap="tochoose(index)">
			{{value}}
		</view>
		
	</view>
	<!-- <tuijian></tuijian> -->
	<swiper :current="currentSwiperIndex" @change="onSwiperChange" :style="{height: listHeight + 10+'px'}">
	    <swiper-item >
			<view class="A">
				<ComponentA :xiaoshuos="data"></ComponentA>
			</view>
	    </swiper-item>
	    <swiper-item >
			<view class="B">
				<ComponentB ></ComponentB>
			</view>
	    </swiper-item>
		<swiper-item >
			<view class="C">
				<ComponentC ></ComponentC>
			</view>
		</swiper-item>
		<swiper-item >
			<view class="D">
				<ComponentD :zuixinbooks="zuixindata"></ComponentD>
			</view>
		</swiper-item>
	  </swiper>
	
	
</template>

<script>
	import ComponentA from '@/components/tuijian/tuijian.vue';
	import ComponentB from '@/components/fenlei/fenlei.vue';
	import ComponentC from '@/components/paihangbang/paihangbang.vue';
	import ComponentD from '@/components/zuixin/zuixin.vue';
	import http from '/pages/utils/request.js'
	export default {
		components: {
		    ComponentA,
		    ComponentB,
			ComponentC,
			ComponentD,
		  },
		data() {
			return {
				title: 'Hello',
				currentSwiperIndex: 0,
				inputValue:'',
				data: [],
				zuixindata: [],
				listHeight: 600,
				msg:['推荐','分类','排行榜','最新上架'],
			}
		},
		onShow() {
			const formData = new FormData();
			formData.append('ids', [1, 2,3,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]);	
			http.post('/book/recommend',formData,{headers: {'Content-Type': 'multipart/form-data',}}).then(res => {
				this.data=res.data;
				console.log(this.data)
			}).catch(err => {
				console.log(err)
			})
			
			
		},
		methods: {
			onSwiperChange(e) {
			      this.currentSwiperIndex = e.detail.current;
				  
				  
				  const query = uni.createSelectorQuery().in(this);
				  				// 下面的用于获取item的高度（这里写三个的原因是高度不一致）
				  				if(e.detail.current == 0){
									//buf[0].classList.add("classList")
				  					query.select('.A').boundingClientRect(data => {
										
				  						this.listHeight = data.height
				  						
				  					}).exec();
				  				}
				  				if(e.detail.current == 1){
									//buf[1].classList.add("classList")
				  					query.select('.B').boundingClientRect(data => {
				  						this.listHeight = data.height
				  					}).exec();
									
				  				}
				  				if(e.detail.current == 2){
				  					query.select('.C').boundingClientRect(data => {
				  						this.listHeight = data.height
				  						
				  					}).exec();
								}
								if(e.detail.current == 3){
									console.log("进入三")
									query.select('.D').boundingClientRect(data => {
										this.listHeight = data.height
									}).exec();
									
									http.get("/book/booknew").then(res => {										
										this.zuixindata=res.data
										console.log(this.zuixindata);
									}).catch(err => {
										console.log(err)
									})
								}
				  
				  
			    },
				tochoose(index){
					this.currentSwiperIndex=index
					
				},
				search(){
					uni.navigateTo({
						url:'/pages/searchresult/searchresult?something='+this.inputValue
					})
				},
		}
	}
</script>

<style>
	.choose{
		color: black;
	}
	.mulu{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		align-items: center;
		height: 60rpx;
		box-sizing: border-box;
		font-weight: bold;
		color: white;
	}
	body{
		background-image: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
		

	}
	.haed-search image{
		height: 60rpx;
		width: 60rpx;
		
	}
	.search{
		outline: 0;
		width: 620rpx;
		height: 64rpx;
		font-size: 26rpx;
		background: transparent;
		opacity: .8;
		
	}
	.haed-search{
		
		width: 750rpx;
		height: 90rpx;
		background: #fff;
		border-radius: 34rpx;
		padding: 12rpx 10rpx 12rpx 32rpx;
		border: 4rpx solid white;
		/* opacity: .4; */
		background-color: beige;
		box-sizing: border-box;
		margin-top: 2rpx;
		display: flex;
		justify-content: space-around;
	}
</style>
